<template>
  <div class="app-container" :style="tableHeight">
    <el-row>
      <el-col style="text-align:right;margin-top: -3px;">
        <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary"
          @click="handleQuery">重置</el-button>
        <el-button size="small" class="filter-item" style="margin-left: 10px;" type="primary"
          @click="saveData">保存</el-button>
      </el-col>
      <el-col>
        <el-row style="display: flex;justify-content: center;">
          <el-col :span="6">
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span>人员类型列表: </span>
              </div>
              <el-table ref="agencyTable" v-loading="agencyLoading" :data="personTypeData" :height="tableHeight"
                :stripe="true" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" style="width: 100%"
                :header-cell-class-name="cellCheckbox" @selection-change="handleAgencySelectionChange"
                @row-click="handleAgencyRowClick" @select="tableSelect">
                <template slot="empty">
                  <tableEmpty />
                </template>
                <el-table-column type="selection" width="50" />
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="personTypeName" label="名称" />
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="6">
            <div style="margin-top: 50%; margin-left: 50%;" />
          </el-col>
          <el-col :span="6">
            <el-card shadow="always">
              <div slot="header" class="clearfix">
                <span>工资项列表: </span>
              </div>
              <el-table ref="salaryTable" v-loading="salaryLoading" :data="salaryData" :height="tableHeight"
                :stripe="true" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                @selection-change="handleSalarySelectionChange" @row-click="handleSalaryRowClick">
                <template slot="empty">
                  <tableEmpty />
                </template>
                <el-table-column type="selection" width="50" :selectable="selectable" />
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column prop="salaryName" label="工资项名称" />
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tableEmpty from '@/components/table/empty'
import { querySalaryBasedataInfo, queryPersonType, queryPersonTypeSalaryByType, saveAgencySalary } from '@/api/salaryConfigManage/salaryProjectConnect'
export default {
  name: 'SalaryProjectConnect',
  components: { tableEmpty },
  data() {
    return {
      tableHeight: null,
      agencyLoading: false,
      personTypeData: [],
      salaryLoading: true,
      salaryData: [],
      agencySelectData: [], // 单位表格选中数据
      salarySelectData: [], // 工资表格选中数据
      personTypeCode: '' // 左边选中的
    }
  },
  watch: {
    salaryData(val) {
      this.doLayout()
    },
    personTypeData(val) {
      this.doLayout()
    }
  },
  created() {
    this.querySalaryBasedataInfo()
    this.getqueryPersonType()
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  methods: {
    // 保存
    saveData() {
      if (this.agencySelectData.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择单位',
          type: 'warning',
          duration: 4000
        })
        return
      }
      if (this.salarySelectData.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择工资项',
          type: 'warning',
          duration: 4000
        })
        return
      }
      const tmplist = []
      this.salarySelectData.forEach(item => {
        const object = {
          salaryId: item.id,
          salaryName: item.salaryName,
          columnName: item.salaryCode,
          personTypeId: this.agencySelectData[0].personTypeId,
          personType: this.agencySelectData[0].personTypeName,
          personTypeCode: this.agencySelectData[0].personTypeCode

        }
        tmplist.push(object)
      })
      saveAgencySalary(tmplist).then(response => {
        this.$message({
          showClose: true,
          message: '保存成功',
          type: 'success',
          duration: 4000
        })
      })
    },
    handleQuery() {
      this.$refs.salaryTable.clearSelection()
      this.$refs.agencyTable.clearSelection()
      this.querySalaryBasedataInfo()
    },
    // 获取左边列表的信息
    getqueryPersonType() {
      this.agencyLoading = true
      queryPersonType().then(respnse => {
        this.personTypeData = respnse.data
        this.agencyLoading = false
      })
    },
    // 获取右边列表的信息
    querySalaryBasedataInfo() {
      querySalaryBasedataInfo().then(response => {
        this.salaryData = response.data
        this.salaryLoading = false
      })
    },
    // 点击工资项表格行选中复选框
    handleSalaryRowClick(row) {
      if (row.salaryCode !== 's1' && row.salaryCode !== 's2') {
        this.$refs.salaryTable.toggleRowSelection(row)
      }
    },
    // 工资项表格选中数据
    handleSalarySelectionChange(val) {
      this.salarySelectData = val
    },
    tableSelect(row) {
      if (this.agencySelectData.length > 0) {
        for (let i = 0; i < row.length; i++) {
          if (row[i].personTypeId !== this.agencySelectData[0].personTypeId) {
            // 获取表格选中数据。 如果和当前不一致，取消选中
            const selectionData = this.$refs.agencyTable.selection
            for (let j = 0; j < selectionData.length; j++) {
              if (selectionData[j].personTypeId !== row[i].personTypeId) {
                this.$refs.agencyTable.toggleRowSelection(
                  selectionData[j],
                  false
                )
              }
            }
          }
        }
      }
      return
    },
    // 点击单位表格行选中复选框
    handleAgencyRowClick(row) {
      // 如果当前时选中状态，在点击该数据时，取消选中
      if (this.agencySelectData.length > 0) {
        if (row.personTypeId !== this.agencySelectData[0].personTypeId) {
          this.$refs.agencyTable.clearSelection()
          this.$refs.agencyTable.toggleRowSelection(row)
        } else {
          this.$refs.agencyTable.toggleRowSelection(row)
        }
      } else {
        this.$refs.agencyTable.toggleRowSelection(row)
      }
    },
    // 单位表格选中数据
    handleAgencySelectionChange(val) {
      this.$refs.salaryTable.clearSelection()
      const array = []
      // 获取表格选中数据,放到数组中缓存
      const selectionData = this.$refs.agencyTable.selection
      for (let i = 0; i < val.length; i++) {
        if (selectionData[0].personTypeId === val[i].personTypeId) {
          array.push(val[i])
        }
      }
      this.agencySelectData = selectionData
      // 获取单位现有的工资项
      if (val.length > 0) {
        this.personTypeCode = selectionData[0].personTypeCode
        this.queryAgencySalaryInfoByAgencyId()
      } else {
        // 当单位表格取消选中时，将工资项表格选中状态清空
        this.$refs.salaryTable.clearSelection()
      }
    },
    // 根据单位id查询已挂接的工资项
    queryAgencySalaryInfoByAgencyId() {
      const tmp = {
        personTypeCode: this.personTypeCode
      }
      queryPersonTypeSalaryByType(tmp).then(respose => {
        // 如果有挂接，将已挂接的工资项选中
        if (respose.data.length > 0) {
          respose.data.forEach(val => {
            this.salaryData.forEach(row => {
              if (val.salaryId === row.id) {
                this.$refs.salaryTable.toggleRowSelection(row, true)
                return
              }
            })
          })
        }
      })
    },
    cellCheckbox(row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    },
    // 获取table高度的方法
    getTbHeight() {
      this.tableHeight = window.innerHeight - 350
    },
    selectable(row) {
        console.log(row.salaryCode)
      // 实发项和应发项复选框disable，不允许修改
      if (row.salaryCode === 's1' || row.salaryCode === 's2') { return false } else { return true }
    },
    /* 重新渲染table组件 */
    doLayout() {
      this.$nextTick(() => {
        this.$refs.salaryTable.doLayout()
        this.$refs.agencyTable.doLayout()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/border.scss";

/*引入公共样式*/
.el-table {
  margin-top: 5px;

  ::v-deep .disabledCheck {
    .cell {
      .el-checkbox {
        .el-checkbox__input {
          display: none !important;
        }
      }
    }
  }
}

.el-card {
  border: 10px solid #65afff;
  box-shadow: 10px 10px 5px #888;
}
</style>
